<!-- 批注通知 -->
<style lang="scss">
    .pro-crm-home-message-postil{
        .list-item{
            padding:10px 0;
            position: relative;
            &::after{
                content: "";
                position: absolute;
                bottom:0;
                left:2%;
                height:1px;
                width:98%;
                background: #f3f3f3;
            }
            .title{
                font-size: 14px;
                font-weight: 400;
                color: #808080;
                cursor: pointer;
                line-height: 24px;
                padding-left: 20px;
                position: relative;
                &::before{
                    content: "";
                    width:6px;
                    height:6px;
                    border-radius: 100%;
                    background: #e4e4e4;
                    position: absolute;
                    left:5px;
                    top:10px;
                }
                &.unread{
                    color:#333333;
                }
                &.unread::before{
                    background: #D24D57;
                }
                &:hover{
                    color:#2f6bcf;
                }
                .date{
                    position: absolute;
                    right: 0;
                    color: #868686;
                    font-size: 12px;
                }
            }
            .content{
                font-size: 12px;
                line-height: 26px;
                color: #868686;
                padding: 0 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .actions{
                position: absolute;
                right: 5px;
                bottom: 10px;
                i{
                    color: #cccccc;
                    cursor: pointer;
                    margin:0 5px;
                    font-size: 12px;
                    &.edit{
                        font-size: 14px;
                    }
                    &:hover{
                        color:#2f6bcf;
                    }
                }
            }
        }
    }
</style>
<template>
  <item-view
    ref="list"
    :total-count="totalCount"
    :loading="loading"
    :visible="visible"
    :title="$t('_message.notation')"
    @buildData="buildData"
    @readAll="readAll"
    :unreadCount="unreadCount"
    v-show="visible"
    class="pro-crm-home-message-postil"
  >
    <div
      slot="listitem"
      v-for="(item,index) in data"
      :key="item"
      class="list-item"
    >
      <div
        :class="{'unread':item.funcEdit == '2'}"
        @click="showPostilInfo(item,index)"
        class="title"
      >
        <span v-html="formatTitle(item)" />
        <!-- <span class="date"><span v-html="formatKeyword(item.bean.SY_CREATEUSERNAME)"></span> {{formatTime(item.bean.SY_CREATETIME)}}</span> -->
      </div>
      <div
        v-html="formatContent(item)"
        class="content"
      />
      <!-- <div class="actions">
                <i class="remove jeicon jeicon-error"></i>
                <i class="edit jeicon jeicon-edit"></i>
            </div> -->
    </div>
  </item-view>
</template>
<script>
import VueI18n from 'vue-i18n';
import Cookies from 'js-cookie';
import ItemView from './item_view.vue';
import Util from '../../util/util.js';
import getLang from '../../assets/lang/mergeLang';

const i18n = new VueI18n({
  locale: 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [{ name: '_message', data: require('./../../assets/lang/message/zh') }, { name: '_bubble', data: require('./../../assets/lang/bubble/zh') }]), // 中文语言包
    en: getLang('en', [{ name: '_message', data: require('./../../assets/lang/message/en') }, { name: '_bubble', data: require('./../../assets/lang/bubble/en') }]), // 英文语言包
  },
});

export default {
  name: 'MessagePostil',
  components: { ItemView },
  i18n,
  data() {
    return {
      loading: true,
      visible: false,
      data: [],
      totalCount: 0, // 总条数，绑定分页条
    };
  },
  mounted() {
    if (Cookies.get('je-local-lang')) {
      this.$i18n.locale = Cookies.get('je-local-lang');
    } else {
      Cookies.set('je-local-lang', this.$i18n.locale);
    }
    const me = this;
    me.$nextTick(() => {
      me.getList().load();
    });
  },
  methods: {
    setVisible(visible) {
      this.visible = visible;
    },
    formatTitle(item) {
      let title = JE.isNotEmpty(item.titleConfig) ? JE.toXT(item.titleConfig, item) : '无';
      title = this.formatKeyword(title);
      return title;
    },
    formatContent(item) {
      const { lastPostil } = item;
      // var content = '最新批注人：'+lastPostil.SY_CREATEUSERNAME+'，'+lastPostil.POSTIL_PZ+'，'+lastPostil.SY_CREATETIME;
      let content = `${this.$i18n.locale == 'zh_CN' ? '最新批注人' : 'Latest annotator'}：${lastPostil.SY_CREATEUSERNAME}，${lastPostil.POSTIL_PZ}，${lastPostil.SY_CREATETIME}`;
      // var content = '【'+item.funcName+'】'+JE.isNotEmpty(item.showConfig)?JE.toXT(item.showConfig,item):'';
      content = this.formatKeyword(content);
      return content;
    },
    formatKeyword(text) {
      const { keyword } = this.getList();
      return Util.formatKeyword(text, keyword);
    },
    getList() {
      return this.$refs.list;
    },
    formatTime(time) {
      return Ext.Date.format(Ext.Date.parse(time, 'Y-m-d H:i:s'), 'm/d H:i');
    },
    /**
             * 全部已读
             */
    readAll() {
      const me = this;
      JE.ajax({
        url: '/je/postil/postil/readAllPostil',
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          if (data.success) {
            me.getList().load();
            JE.msg(me.$i18n.locale == 'zh_CN' ? '设置成功！' : 'Setup successful!');
          }
        },
      });
    },
    getParams() {
      const params = this.getList().getParams();
      params.type = params.readStatus;
      params.category = 'receive';
      return params;
    },
    refresh() {
      this.getList().load();
    },
    /**
             * 加载数据
             */
    buildData(callback) {
      const me = this;
      me.loading = true;
      JE.ajax({
        url: '/je/postil/postil/loadPostil',
        params: me.getParams(),
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          me.data = data.rows;
          me.totalCount = data.totalCount;
          callback && callback(data);
          me.$emit('doact', 'refreshBadge', {
            type: 'POSTIL',
            num: true,
            numObj: {
              numCount: data.noReadCount,
            },
          });
          me.unreadCount = data.noReadCount;
          me.loading = false;
        },
      });
    },
    showPostilInfo(item, index) {
      const me = this;
      JE.CoreUtil.showPostil({
        funcCode: item.funcCode,
        pkValue: item.pkValue,
        openForm: true,
        showMail: false,
        showOtherBtn: true,
      });
      if (item.funcEdit != '0') {
        const obj = Util.doReadMark('postil', item.pkValue);
        if (obj.success) {
          me.buildData();
        }
        item.funcEdit = '0';
        this.$set(this.data, index, item);
      }
    },
  },
};
</script>
